<template>
  <div class="chartContainer">
    <div class="title">
      <span class="titleText">{{userName}} 合格率折线图</span>
      <span class="sybTitleText">
              平均合格率为 <span :style="`color:${successRateCountColor};`">{{successRateCount}}</span>
            </span>
    </div>
    <div class="chartInContainer">
      <v-chart :options="option"></v-chart>
    </div>
  </div>
</template>

<script>
import basicMixins from '@/utils/commonChartMixins'

export default {
  name: 'userSuccessRateChart',
  mixins: [basicMixins],
  data() {
    return {
      successRateCount: 0,
      successRateCountColor: '#de031c',
      userName: ''
    }
  },
  methods: {
    requestData(property) {
      const option = {
        userInfoId: this.R.prop('userInfoId', property)
      }

      this.mRequest('userApi/getSuccessRateByUserId', option, (res) => {
        this.userName = this.R.pathOr('未知', ['data', 'eChartJson', 'userName'], res)
        this.successRateCount = this.R.pathOr('未知', ['data', 'eChartJson', 'successRateCount'], res)
        if (this.successRateCount <= 60) {
          this.successRateCountColor = '#de031c'
        } else if (this.successRateCount <= 90) {
          this.successRateCountColor = '#deb624'
        } else {
          this.successRateCountColor = '#8bde42'
        }
        this.option = this.groupOption(this.R.pathOr({}, ['data', 'eChartJson'], res))
      })
    },
    groupOption(obj) {
      return this.oneLineOption(obj)
    }
  }
}
</script>
